$(function() {
  var ENTER = 13
  //以下是第一功能获取一些的东西：
  //获取输入框
  var $item = $('.new-todo')
  //获取隐藏的列表和底部选项
  var $main = $('.main')
  var $footer = $('.footer')
  //获取ul .todo-list，存放新增内容
  var $todoList = $('.todo-list')
  //获取0 intem left中的0
  var $itemNum = $('.todo-count strong')
  //定义，储存已完成的item的长度
  var newLength = 0
  //获取active按钮
  var $activeFilter = $('.filters').find('a[href$="#/active"]')
  //获取completed按钮
  var $completedFilter = $('.filters').find('a[href$="#/completed"]')
  //获取all按钮
  var $all = $('.filters').find('a[href$="#/"]')
  //获取clear-completed按钮
  var $clearCp = $('.clear-completed')
  //1.增:注册回车键抬起事件，保存数据-------最后的最后，顺便注册 x 点击事件
  /*
    a.清空input中的内容
    b.把列表$(".main")显示出来；把底部选项$(".footer")显示出来
    c.将input中的val()放到li中，存到$(.todo-list)最下面
    d.更新底部的值：$(".todo-count strong").text为li的长度----0 intem left中的0
  */
  $('.new-todo').on('keydown', function(e) {
    var theEvent = window.e || arguments.callee.caller.arguments[0]
    var key = theEvent.keyCode
    if (key == ENTER && $item.val() !== '') {
      var itemValue = $item.val()
      //console.log('test：按回车了')
      //console.log('test:' + $item.val())
      //a和b完成:
      $item.val('')
      $main.css('display', 'block')
      $footer.css('display', 'block')
      //创建一个列表，先复制过来
      //c完成；
      $todoList.append(`
      <li>
        <div class="view">
          <input class="toggle" type="checkbox">
          <label>${itemValue}</label>
          <button class="destroy"></button>
        </div>
        <input class="edit" value="${itemValue}">
      </li>
      `)
      //d完成
      //调用renovate函数，更新底部数据
      $itemNum.text(renovate())
      //2.删：单条todo删除--为每个 x 注册鼠标点击事件
      //a.删除当前点击的这条todo
      //b.刷新底部intem left的值
      //先获取当前的destroy，即最后一个
      var $nowList = $todoList.children('li:last-child')
      var $destroy = $nowList.find('button')
      //注册点击事件
      $destroy.on('click', function() {
        //console.log('test:' + itemValue)
        this.parentNode.parentNode.remove()
        //调用renovate函数，更新底部数据
        $itemNum.text(renovate())
      })
      //end 功能一和二
      //3.双击编辑todo:
      //a.把当前的li的class变为editing,其他的class变为view
      //获取当前的li里面的label，并注册双击事件
      var $nowLabel = $nowList.children().children('label')
      $nowLabel.on('dblclick', function() {
        //当前的li的class变为editing,其他的class变为view
        $todoList.children('li').attr('class', 'view')
        $nowList.attr('class', 'editing')
        //获取这个编辑中的文本框
        var $eidtInput = $(this)
          .parent()
          .next()
        //先保存原来的值，如果用户不输入数据就敲回车，则返回原来的值
        var td = $(this)
        var txt = td.text()
        //自动获取焦点
        $eidtInput.trigger('focus')
        //先清除文本框的内容为空
        $eidtInput.val('')
        $eidtInput.on('keydown', enterToSet)
        //函数：按回车之后保存到$eidtInput.val中。如果要双击其他地方也可以保存呢？怎么写
        function enterToSet() {
          var theEvent = window.e || arguments.callee.caller.arguments[0]
          var key = theEvent.keyCode
          if (key == 13) {
            var newtxt = $(this).val()
            //判断如果内容为空，则不做任何改变
            newtxt == '' ? $nowLabel.text(txt) : $nowLabel.text(newtxt)
            $nowList.attr('class', '')
          }
        }
      })
      //end 功能三
      //四、单条改：单条todo已完成相应样式状态改变
      /*
      a.点击复选框后，改变nowlist的样式
      b.修改底部数据
      c.同时判断：只要有一个勾上了，就显示.clear-completed按钮(功能八)
      c的实现，要调用findcheck函数，如果返回的数组长度为!0，那就要显示按钮
      */
      //获取当前的复选框input--是label的.prev()
      var $checkItem = $nowLabel.prev()
      $checkItem.on('click', function() {
        if ($checkItem.prop('checked')) {
          $nowList.attr('class', 'completed')
        } else {
          $nowList.attr('class', '')
        }
        //调用findcheck函数，获取已选中的个数
        var $allLists = $todoList.children()
        var check = findCheck($allLists)
        if (check.length != 0) {
          $clearCp.css('display', 'inline-block')
        } else {
          $clearCp.css('display', 'none')
        }
        //调用函数，更新底部数据
        $itemNum.text(renovate())
        //原来var flag = $('.toggle:checked')可以直接获取所有的选中li，唉
      })
      //end 功能四
    }
  })
  //end 功能一二三四
  //功能五.点击active，只显示未完成的li
  $activeFilter.on('click', avFilter)
  //功能六.点击completed，只显示已完成的li
  $completedFilter.on('click', cpFilter)
  //功能七.点击all，显示全部的li
  $all.on('click', noFilter)
  function avFilter() {
    //获取（此时）所有的ul下的所有li，所以不能在外面定义变量
    var $allLists = $todoList.children()
    //check和noCheck分别是存放相关li的数组
    var check = findCheck($allLists)
    var noCheck = findNoCheck($allLists)
    for (var i = 0; i < check.length; i++) {
      $(check[i]).hide()
    }
    for (var i = 0; i < noCheck.length; i++) {
      $(noCheck[i]).show()
    }
  }
  function cpFilter() {
    //获取所有的ul下的所有li
    var $allLists = $todoList.children()
    //check和noCheck分别是存放相关li的数组
    var check = findCheck($allLists)
    var noCheck = findNoCheck($allLists)
    for (var i = 0; i < check.length; i++) {
      $(check[i]).show()
    }
    for (var i = 0; i < noCheck.length; i++) {
      $(noCheck[i]).hide()
    }
  }
  function noFilter() {
    //获取所有的ul下的所有li
    var $allLists = $todoList.children()
    $allLists.each(function() {
      $(this).show()
    })
  }
  //1.根据findCheck与findNoCheck函数找到已选择的li，原数组.push(新对象)添加进到数组中
  //2.遍历数组.css(,)改变display属性
  //4.新建两个函数，用于寻找check或者nocheck,并放在返回的数组中
  //5.参数a是ul下的所有li
  function findCheck(a) {
    var getItems = []
    a.each(function() {
      if ($(this).hasClass('completed')) {
        getItems.push($(this))
      }
    })
    //console.log(getItems)
    return getItems
  }
  function findNoCheck(a) {
    var getItems = []
    a.each(function() {
      if ($(this).hasClass('completed')) {
      } else {
        getItems.push($(this))
      }
    })
    return getItems
  }
  //end 功能五六七
  //功能八.点击clear-completed,清除所有的勾选项目
  //a.点击复选框后判断：只要有存在复选框，.clear-completed就显示，否则隐藏
  //b.点击后将数组里面的东西.remove掉，同时数组清空掉
  $clearCp.on('click', function() {
    var $allLists = $todoList.children()
    var check = findCheck($allLists)
    for (var i = 0; i < check.length; i++) {
      $(check[i]).remove()
    }
  })
  //end 功能八
  //end 功能九.如果复选框全部勾选，小下拉箭头变黑！---在功能四里面
  //点击之后，如果当前class有.toggle-all:checked + label:before，则移除
  $('.main label').on('click', function() {
    //获取所有的li的数组
    var $allLists = $todoList.children()
    //console.log('ddd')
    var flag = $('.toggle-all:checked').length
    //console.log("test:"+flag)
    if (flag == 0) {
      $allLists.attr('class', 'completed')
      $allLists.find('input').prop('checked', true)
    } else {
      $allLists.attr('class', '')
      $allLists.find('input').prop('checked', false)
    }
    $itemNum.text(renovate())
  })
  //总结1：checked用prop属性更改
  //总结2：true和false不能用引号
  //end 功能九
  //十.底部数据0 intem left中的0随时刷新，做个函数吧，下列情况直接调用。
  //a.回车新增的时候
  //b.点击复选框的时候
  //c.点 x 删掉的时候
  //d.全选/全不选的时候
  function renovate() {
    var $allLists = $todoList.children()
    //noCheck是未选中的li的数组
    var noCheck = findNoCheck($allLists)
    return noCheck.length
  }
  //end 功能十
})
